<!--
 * @Author: CZY
 * @Date: 2024-09-10 23:47:03
 * @LastEditors: CZY
 * @LastEditTime: 2024-09-10 23:47:03
 * @Description:
-->

<template>
  <div class="contents">
    <div class="contetn_left">
      <div class="pagetab">
        <div class="item" @click="jump">山洪水沙监测</div>
      </div>
      <ItemWrap class="contetn_left-top contetn_lr-item" title="云台角度">
        <LeftTop />
      </ItemWrap>
      <ItemWrap class="contetn_left-center contetn_lr-item" title="通道状态">
        <LeftCenter />
      </ItemWrap>
      <ItemWrap
          class="contetn_left-bottom contetn_lr-item"
          title="监控"
          style="padding: 0 10px 16px 10px"
      >
        <LeftBottom />
      </ItemWrap>
    </div>
    <div class="contetn_center">
      <CenterMap class="contetn_center_top" />
      <ItemWrap class="contetn_center-bottom" title="电源控制">
        <CenterBottom />
      </ItemWrap>
    </div>
    <div class="contetn_right">
      <ItemWrap
          class="contetn_left-bottom contetn_lr-item"
          title="云台旋转速度"
      >
        <RightTop />
      </ItemWrap>
      <ItemWrap
          class="contetn_left-bottom contetn_lr-item"
          title="设备总览"
          style="padding: 0 10px 16px 10px"
      >
        <RightCenter />
      </ItemWrap>
      <ItemWrap
          class="contetn_left-bottom contetn_lr-item"
          title="自定义指令"
      >
        <RightBottom />
      </ItemWrap>
    </div>
  </div>
</template>

<script>
import LeftBottom from "@/views/indexs/lidar/left-bottom.vue";
import CenterMap from "@/views/indexs/lidar/center-map.vue";
import CenterBottom from "@/views/indexs/lidar/center-bottom.vue";
import RightBottom from "@/views/indexs/lidar/right-bottom.vue";
import LeftTop from "@/views/indexs/lidar/left-top.vue";
import RightTop from "@/views/indexs/lidar/right-top.vue";
import RightCenter from "@/views/indexs/lidar/right-center.vue";
import LeftCenter from "@/views/indexs/lidar/left-center.vue";
import axios from "axios";
import {stringify} from "qs";

export default {
  components: {
    LeftTop,
    LeftCenter,
    LeftBottom,
    CenterMap,
    RightTop,
    RightCenter,
    RightBottom,
    CenterBottom,
  },
  data() {
    return {
      wsClient: null,
      hikConnect: null,
      webTitle: "",
      secretConfigInfoData: {
        bSecret: true,
        openAppkey: "1852240381220245582",
        openAppSecret: "MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAIumvMYHNUnRzhmtxbP++xX+1Nar8cTUxkw84hAlYUCcLzEBMMWqEgZtGIXYyijALnNnWTsoQbmPt7iKWeON/fKa92quTakrteJq4cqOyJMABf2mrA46C4SEIigqrwTVFofh1z/Jpqjdir+W+pXxCfxuLz3pPYDS26JK50ZcbugJAgMBAAECgYB8smLHVHJhuwSUa1UolxpuloBIO3qDbhauxoJ5NldzkMKWuGBrb6PutwV5po1E++2+QF8t8pFVdx3umyMOjKBe6KsbCTLXyRpaBvDzGuoYH6+sElLKqnUZK20G8R6Uwq/U1O1Pp7TIiNV7t6arx/8UJtBup1eQpHf5DWVCRk2uXQJBAM8pcVJYfghJJR31nx1Gmx5SCAmrbso3vkeDdmqpGUDZNvPpSfK6jQb+GH+Qo00FihzWooi6S+LWS/fanM/0OeMCQQCskuwHQH3DOKZjoIcIF0d6tQhDLsnbUDi6T7i6HXTT/RkxbgIRDPqSEHH+6yNU/FA9XnHuvXfpzUGeGpsSEWojAkEAoY7qZ5PHxmJ05eZ2DnjP5FeJGTFvF5lddZwar5fsr9w2tQXMu9WswjVLmcCM+jZFvbPN0d+n6uHBISyGes82jQJAFtiMbplXDNUfEeladvO9/rygj2ROTL5eBCwxpFHp+XZ0M1sA4wj40wViUgEG+GU+qiEqrBRhH46QtUGIbefoSQJAITMzHTb+IJ2IyC5Ae+0jg+rCVc0YdmRVf1+g9VZqW4NqN+JIuTazk9Y4qcisLXw9Pio6tHpbGiXAUp/xfpPjGw=="
      },
      initWndParamData:{
        ezAccessData: "",
        appAccessToken: "at-XFLWH8CIKLd0jLkI_0AIyzquYrJBV-Mo6W0LY1vU",
        userAccessToken: "ut-b6a90c1a-2abc-434b-80c7-52259c74e2b8",
        ezvizAddr: 'https://open.ys7.com',
        authAddr: 'https://auth.ys7.com',
        openAddr: 'https://open.ys7.com'
      },
      wndGeometryData:{
        rect:{
          top: 100,
          left: 100,
          width: 400,
          height: 400
        }
      },
      initResourceData:{
        resourcesData: null,
        tokensData: null,
        capacitysData: null,
      }
    }
  },
  created() {
    this.webTitle = "fnauighaidgahu";
    this.$store.dispatch('setting/fetchAccessToken');
    // console.log("webTitle:",this.webTitle)
  },
  async mounted() {
    // await this.initHik();
  },
  methods: {
    jump() {
      this.$nextTick().then(() => {
        this.$store.state.setting.title = "山洪水沙灾害监测平台";
        this.$router.push('/')
      });
    },
    async getEzAccessData(){
      const res = await axios.get("https://open-api.hikiot.com/device/v1/token/ops/get",{
        headers: {
          "Content-Type": "application/json",
          "App-Access-Token": this.initWndParamData.appAccessToken,
          "User-Access-Token": this.initWndParamData.userAccessToken
        }
      })
      res.data = await this.decryptByPrivateKey(res.data);
      this.initWndParamData.ezAccessData = JSON.stringify(res);
    },
    async decryptByPrivateKey(key){ //解密
      const data = await axios.post("http://localhost:5000/test/decryptByPrivateKey", stringify({ key: key }),{
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        }
      })
      return data;
    },
    async encryptByPrivateKey(key){ //加密
      const data = await axios.post("http://localhost:5000/test/encryptByPrivateKey", stringify({ key: key }),{
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        }
      })
      return data;
    },
    async initHik(){
      this.wsClient = new WebSocketClient();
      if(!this.hikConnect){
        this.hikConnect = await this.wsClient.connect();
        await this.getEzAccessData();
      }
      if(this.hikConnect.code===0&&this.hikConnect.message==='connect success'){
        console.log('连接成功',this.hikConnect)
      }else if(err.code===999){
        console.log('非支持浏览器类型')
      }else if(err.code===888){
        console.log('非支持系统')
      }else if(err.code===6){
        console.log('不允许多个窗口运行')
      }


      this.wsClient.setSecretConfigInfo(this.secretConfigInfoData, (response) => {
        console.log(response, 'setSecretConfigInfo初始化回调')
        console.log(this.initWndParamData,"this.initWndParamData")
        this.wsClient.initWndParam(this.initWndParamData, (response) => {
          console.log(response, 'initWndParam初始化回调')
          this.wsClient.setParentWnd({webTitle: this.webTitle},(response)=>{
            console.log(response, '设置父窗口回调')
            this.wsClient.setWndGeometry(this.wndGeometryData, (response) => {
              console.log(response, '设置窗口位置回调')
              this.wsClient.setPlayWindowType({windowMode: 'preview'},async (response) => {
                console.log(response, '模式切换回调')

                const keyQuerySecret = await this.encryptByPrivateKey(stringify({deviceSerial:"FM2205082",channelNo:"1"}))
                const idRes = await axios.get(`https://open-api.hikiot.com/device/desk/pc/resource/v1/getById?querySecret=${encodeURIComponent(keyQuerySecret)}`,{
                  headers: {
                    "Content-Type": "application/json",
                    "App-Access-Token": this.initWndParamData.appAccessToken,
                    "User-Access-Token": this.initWndParamData.userAccessToken
                  }
                })

                const str = JSON.stringify([{"deviceSerial":"FM2205082","channelNo":1}])
                const batchQuerySecret = await this.encryptByPrivateKey(str)
                const batchRes = await axios.post(`https://open-api.hikiot.com/device/v1/token/device/batch`,{
                  "bodySecret": batchQuerySecret
                },{
                  headers: {
                    "Content-Type": "application/json",
                    "App-Access-Token": this.initWndParamData.appAccessToken,
                    "User-Access-Token": this.initWndParamData.userAccessToken
                  }
                })


                const deviceCapacitiesQuerySecret = await this.encryptByPrivateKey(stringify({deviceSerial:"FM2205082",resType:"Device"}))
                const deviceCapacitiesRes = await axios.get(`https://open-api.hikiot.com/device/v1/getDeviceCapacities?querySecret=${encodeURIComponent(deviceCapacitiesQuerySecret)}`,{
                  headers: {
                    "Content-Type": "application/json",
                    "App-Access-Token": this.initWndParamData.appAccessToken,
                    "User-Access-Token": this.initWndParamData.userAccessToken
                  }
                })

                idRes.data = await this.decryptByPrivateKey(idRes.data);
                console.log(idRes.data);
                this.initResourceData.resourcesData = JSON.stringify(idRes);

                batchRes.data = await this.decryptByPrivateKey(batchRes.data);
                console.log(batchRes.data);
                this.initResourceData.tokensData = JSON.stringify(batchRes);

                deviceCapacitiesRes.data = await this.decryptByPrivateKey(deviceCapacitiesRes.data);
                console.log(deviceCapacitiesRes.data);
                this.initResourceData.capacitysData = JSON.stringify(deviceCapacitiesRes);

                console.log(this.initResourceData,"this.initResourceData")
                this.wsClient.initResource(this.initResourceData,(response)=>{
                  console.log(response, '初始化资源回调')
                  this.wsClient.showWnd();
                  this.wsClient.startPreview(1,{
                    deviceSerial: "FM2205082",
                    channelNo: 1
                  },(res)=>{
                    console.log(res, '开启实时预览回调')
                  });
                });
              });
            });
          });
        });
      });
    },
  }
}
</script>

<style scoped lang="scss">
// 内容
.contents {
  .contetn_left,
  .contetn_right {
    width: 540px;
    box-sizing: border-box;
    // padding: 16px 0;
  }

  .contetn_center {
    width: 720px;
  }

  //左右两侧 三个块
  .contetn_lr-item {
    height: 310px;
  }

  .contetn_center_top {
    width: 100%;
  }

  // 中间
  .contetn_center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .contetn_center-bottom {
    height: 315px;
  }

  //左边 右边 结构一样
  .contetn_left,
  .contetn_right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;


  }

  .contetn_left{
    .pagetab{
      cursor: pointer;
    }
  }
}


@keyframes rotating {
  0% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(1.1);
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
</style>

<style>
.iconfont {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
